<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <div class="top-operate-default flex-col" style="align-items: baseline; padding: 20px 0; height: 100%; ">
        <div class="pad-l-15">
          <div class="inline-flex">
            <el-select v-model="textCol" class="width-150">
              <el-option label="主订单号" value="projectOrderNo"></el-option>
              <el-option label="子订单号" value="orderNo"></el-option>
              <el-option label="平台订单号" value="externalOrderNo"></el-option>
              <el-option label="来源订单号" value="sellApartOrderNo"></el-option>
              <el-option label="来源企业" value="supplyAllianceEnterpriseName"></el-option>
              <el-option label="收货人姓名" value="customerNickname"></el-option>
              <el-option label="收货人手机" value="customerPhone"></el-option>
              <el-option label="商品外部编码" value="goodsExternalCode"></el-option>
              <el-option label="商品名称" value="goodsTitle"></el-option>
            </el-select>
            <el-input v-model.trim="textValue" placeholder="请输入内容" class="mar-l-5 width-300"></el-input>
          </div>
          <el-select v-model="defaultQuery.orderType" placeholder="订单类型" clearable class="mar-l-10 width-150">
            <el-option v-for="(val, key) in dict.orderType" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.externalPlatformType" placeholder="平台" @change="changePlatformType"
            class="mar-l-10 width-100" clearable>
            <el-option v-for="(val, key) in dict.platformType" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.externalShopId" placeholder="店铺" class="mar-l-10 width-250" clearable>
            <el-option v-for="(item, index) in shopList" :key="index" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
          <div class="inline-flex mar-l-10">
            <el-select v-model="timeCol" class="width-150">
              <el-option label="创建时间" value="createTime"></el-option>
              <el-option label="付款时间" value="payTime"></el-option>
            </el-select>
            <el-date-picker v-model="timeValue" type="datetimerange" unlink-panels range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="开始时间"
              end-placeholder="结束时间" class="mar-l-5">
            </el-date-picker>
          </div>
        </div>
        <div class="pad-l-15 mar-t-10">
          <el-select v-model="defaultQuery.source" placeholder="发货方" clearable style="width: 150px"
            @change="changeSource">
            <el-option v-for="(val, key) in dict.source" :key="key" :label="val" :value="key"></el-option>
            <el-option label="仓库" value="-1"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.warehouseId" placeholder="仓库" clearable class="width-300"
            :disabled="warehouseIdDisabledButton" @change="changeWarehouseId">
            <el-option v-for="(item, index) in warehouseList" :key="index" :label="item.warehouseName"
              :value="item.warehouseId"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.supplierId" placeholder="供应商" class="mar-l-10 width-265" clearable
            :disabled="supplierIdDisabledButton" @change="changeSupplierId">
            <el-option v-for="supplier in suppliers" :key="supplier.supplierId" :label="supplier.supplierName"
              :value="supplier.supplierId">
            </el-option>
          </el-select>
          <el-select v-model="defaultQuery.isSupplyAllianceOrder" placeholder="订单来源" clearable
            class="mar-l-10 cus-select">
            <el-option label="全部" value=""></el-option>
            <el-option label="企业订单" value="0"></el-option>
            <el-option label="供货联盟订单" value="1"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.orderStatus" placeholder="子订单状态" clearable class="mar-l-10 width-250">
            <el-option v-for="(val, key) in dict.orderStatus" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="pad-t-15 pad-b-15 font-14 v-align-c">
        <el-button class="batch-btn" @click="doExport">导出</el-button>
      </div>
      <div class="table-container">
        <el-table :data="dataList" @selection-change="checkedAllHandle" v-loading="listLoading"
          element-loading-text="加载中">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column min-width="240px" label="订单信息" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
                <div class="font-14 pad-l-10 line-2">
                  <span>{{ scope.row.goodsTitle }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="270px" label="订单号">
            <template slot-scope="scope">
              <div>子订单号: {{scope.row.orderNo}}</div>
              <div>主订单号: {{scope.row.projectOrder.orderNo}}</div>
              <div v-if="scope.row.sellApartOrderNo">来源订单号:
                {{ scope.row.sellApartOrderNo }}</div>
              <div v-else>平台订单号: {{ scope.row.projectOrder.externalOrderNo || scope.row.projectOrder.originalNo }}</div>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="订单状态" align="center">
            <template slot-scope="scope">
              <div>
                <span>订单状态：</span>
                <span class="font-blue">{{dict.orderStatus[scope.row.orderStatus]}}</span>
              </div>
              <div>
                <span>售后状态：</span>
                <template v-if="scope.row.afterSaleFlag == 0">
                  <span class="font-color">{{dict.afterSaleFlag[scope.row.afterSaleFlag]}}</span>
                </template>
                <template v-else>
                  <span v-if="scope.row.projectOrder.orderNo" class="font-red cursor-p" @click="doLinkAfter(scope.row)">{{dict.afterSaleFlag[scope.row.afterSaleFlag]}}</span>
                  <span v-else class="font-red">{{dict.afterSaleFlag[scope.row.afterSaleFlag]}}</span>
                </template>
              </div>
              <div>
                <span>截停状态：</span>
                <span v-if="scope.row.stopFlag == 0">{{dict.stopFlag[scope.row.stopFlag]}}</span>
                <span v-else class="font-red">{{dict.stopFlag[scope.row.stopFlag]}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="分仓状态" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.waitSeparateWarehouseFlag == 1 ? '待分仓' : scope.row.warehouseId ? '已分仓' : '无' }}</div>
              <div v-if="scope.row.separateFailMsg">失败原因：{{ scope.row.separateFailMsg }}</div>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="订单类型" align="center">
            <template slot-scope="scope">
              {{ dict.orderType[scope.row.projectOrder.orderType] || '&nbsp;' }}
            </template>
          </el-table-column>
          <el-table-column width="200px" label="订单来源" align="center" prop="sellApartOrderNo">
            <template slot-scope="scope">
              <span
                v-if="scope.row.sellApartOrderNo != null && scope.row.sellApartOrderNo != ''">
                <span>供货联盟订单</span>
                <div>{{scope.row.supplyAllianceEnterpriseName}}</div>
              </span>
              <span v-else>企业订单</span>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="所属平台" align="center">
            <template slot-scope="scope">
              <div>{{ dict.platformType[scope.row.projectOrder.externalPlatformType] }}</div>
              <div>{{ scope.row.projectOrder.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="收货人" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.projectOrder.customerNickname}}</div>
              <div>{{scope.row.projectOrder.customerPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="商品数量" prop="supplierOrderPrice" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.goodsNum}}</div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="发货方" prop="supplierOrderPrice" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.warehouseId && !scope.row.supplierId ? '仓库' : dict.source[scope.row.source] }}</div>
              <div v-if="scope.row.warehouseId" style="color:#409EFF;">{{scope.row.warehouseName}}</div>
              <div v-if="scope.row.supplierId" style="color:#409EFF;">{{scope.row.supplierName}}</div>
            </template>
          </el-table-column>
          <el-table-column width="80px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { pageApartOrder } from '@/api/goods/apartOrder'
  import { getDictByGroupName } from '@/api/common/common'
  import { listThirdShop } from '@/api/user/third-shop'
  import { listWarehouseInfo } from '@/api/warehouse/warehouseInfo'
  import { listSupplier } from '@/api/user/supplier'
  import { downloadFile } from '@/api/common/common'

  export default {
    data() {
      return {
        // tab model
        tabActiveStatus: '1',
        // 文本model
        textCol: 'orderNo',
        textValue: '',
        // 时间model
        timeCol: 'createTime',
        timeValue: [],
        // 查询条件
        searchListQuery: {
          orderIds: []
        },
        // 默认条件
        defaultQuery: {
          enterpriseId: '',
          supplierId: '',
          externalPlatformType: '',
          externalShopId: '',
          currentPage: 1,
          source: '',
          size: 10
        },
        // 数据字典
        dict: {
          orderStatus: {},
          orderType: {},
          platformType: {},
          source: {},
          stopFlag: {}
        },
        shopList: [],
        // 仓库集合
        warehouseList: [],
        suppliers: [],
        dataList: [],
        multipleSelection: [],
        total: 0,
        listLoading: false,
        warehouseIdDisabledButton: false,
        supplierIdDisabledButton: false
      }
    },
    created() {
      this.searchListQuery = {
        ...this.defaultQuery
      }
      // 获取仓库列表
      const form = {
        enterpriseId: this.getEnterpriseId(),
        supplierId: this.getSupplierId(),
        warehouseSource: this.getSupplierId() ? 2 : 1,
        status: 1
      }
      listWarehouseInfo(form).then((response) => {
        this.warehouseList = response.data
      })
      // 获取数据字典
      getDictByGroupName('ProjectOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ThirdOrderDTO.platformType').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ApartOrderDTO.stopFlag').then(response => {
        Object.assign(this.dict, response.data)
      })
      // 获取供应商
      listSupplier({ enterpriseId: this.getEnterpriseId() }).then(response => {
        this.suppliers = response.data
      })
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.setSearchListQuery()
        pageApartOrder(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      changePlatformType() {
        this.defaultQuery.externalShopId = ''
        const params = {
          enterpriseId: this.getEnterpriseId(),
          platformType: this.defaultQuery.externalPlatformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          this.shopList = response.data
        })
      },
      changeSource() {
        // 10：总部订单 20：供应商订单 30:淘宝联盟订单 40:供货联盟
        if (this.defaultQuery.source === '10' || this.defaultQuery.source === '30' || this.defaultQuery.source === '40') {
          this.defaultQuery.supplierId = ''
          this.defaultQuery.warehouseId = ''
          this.warehouseIdDisabledButton = true
          this.supplierIdDisabledButton = true
        } else if (this.defaultQuery.source === '20') {
          this.defaultQuery.warehouseId = ''
          this.warehouseIdDisabledButton = true
          this.supplierIdDisabledButton = false
        } else if (this.defaultQuery.source === '-1') {
          this.defaultQuery.supplierId = ''
          this.warehouseIdDisabledButton = false
          this.supplierIdDisabledButton = true
        } else {
          this.warehouseIdDisabledButton = false
          this.supplierIdDisabledButton = false
        }
      },
      changeSupplierId() {
        if (this.defaultQuery.supplierId) {
          this.defaultQuery.warehouseId = ''
          this.warehouseIdDisabledButton = true
        } else {
          this.warehouseIdDisabledButton = false
        }
      },
      changeWarehouseId() {
        if (this.defaultQuery.warehouseId) {
          this.defaultQuery.supplierId = ''
          this.supplierIdDisabledButton = true
        } else {
          this.supplierIdDisabledButton = false
        }
      },
      // 构建查询条件
      setSearchListQuery() {
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.orderIds = []
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 查看详情事件
      doLinkDetail(row) {
        // this.$router.push({ path: '/order/apart-detail', query: { apartOrderId: row.apartOrderId }})
        const routeData = this.$router.resolve({
          path: '/order/apart-detail',
          query: {
            apartOrderId: row.apartOrderId
          }
        })
        window.open(routeData.href, '_blank')
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      },
      // 获得选择项
      checkedAllHandle(val) {
        this.multipleSelection = this.$utils.deepClone(val)
      },
      // 导出事件
      doExport() {
        if (this.multipleSelection.length > 0) {
          const apartOrderIds = this.multipleSelection.map(item => item.apartOrderId)
          downloadFile('/order/apartOrder/exportApartOrder', {
            apartOrderIds: apartOrderIds.join(','),
            enterpriseId: this.getEnterpriseId()
          }, '订单查询.xlsx')
        } else {
          this.setSearchListQuery()
          downloadFile('/order/apartOrder/exportApartOrder', this.searchListQuery, '订单查询.xlsx')
        }
      },
      // 查看售后事件
      doLinkAfter(row) {
        const routeData = this.$router.resolve({
          path: '/order/after-sale/list',
          query: { orderNo: row.projectOrder.orderNo }
        })
        window.open(routeData.href, '_blank')
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
